﻿<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>置顶</title>
        <link rel="shortcut icon" href="clientapp/images/new_images/favicon.ico"/>
        <link href="/static/home/mobile/css/reset_5.css" rel="stylesheet" type="text/css" />
        <link href="/static/home/mobile/css/style.css" rel="stylesheet" type="text/css" />
        <link href="/static/home/mobile/css/new_style.css" rel="stylesheet" type="text/css" />
        {include file="common/header"}
    </head>
    <style type="text/css">
        /*reset*/
        * {
           margin: 0px;
           padding: 0px;
        }
        html {
           font-size: 62.5%;
        }
        body {
           font-family: "微软雅黑", "Microsoft Yahei", "Arial";
           font-size: 1.4rem;
           background: #fff;
           line-height: 1.5;
           color: #333;
           overflow-x: hidden;
           overflow-y: auto;
           -webkit-overflow-scrolling: touch;
        }
        a {
           text-decoration: none;
           -webkit-transition: all 0.3s ease-in-out;
           transition: all 0.3s ease-in-out;
           color: #333;
        }
        .head{
            background-color: #e74b3c;
            height: 64px;
            line-height: 64px;
            text-align: center;
            color: #fff;
            font-size: 2.0rem;
            position: relative;
        }
        .head a{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 50px;
            text-align: center;
        }
        .site-header .tit-name{
            font-size: 1.6rem;
            text-indent: -60px;
        }

 .mainer{margin: 0 auto; max-width: 760px; background: #fff;margin-top:50px;}
 .wrap{width: 100%; margin: 0 auto; position: relative;}
.campaign-main .item{background: #fff; border: 1px solid #d5dadc; border-left: 0; border-right: 0}
.campaign-main .campaign-item{padding: 5px; border-bottom: 1px solid #d5dadc}
.campaign-main .img{float: left; overflow: hidden; margin-right: 10px;}
.campaign-main h4{font-size: 1.1em; font-weight: normal}
.campaign-main p{line-height: 1.5em; font-size: 14px}
.campaign-main .user-fav{overflow: hidden}
.campaign-main .campaign-bottom{text-align: center; padding: .5em 0}
.campaign-main .campaign-bottom a{display: inline-block; width: 6em; margin: 0 1em; border: 1px solid #51c332; line-height: 2em; border-radius: .2em; color: #51c332}
.campaign-main .campaign-bottom a:last-child{background: #51c332; color: #fff}

.tcui-loadmore_line{border-top: 1px solid #e5e5e5}
.tcui-loadmore_line .tcui-loadmore__tips{position: relative; top: -0.9em; padding: 0 .55em; background-color: #fff; color: #999}

.tcui-loadmore{width: 65%; margin: 0 auto; line-height: 1.6em; font-size: 14px; text-align: center}
.tcui-loadmore__tips{display: inline-block; color: #968b8b; vertical-align: middle}
.tcui-loadmore_line{border-top: 1px solid #e5e5e5}
.tcui-loadmore_line .tcui-loadmore__tips{position: relative; top: -0.9em; padding: 0 .55em; background-color: #fff; color: #999}
.tcui-loadmore_dot .tcui-loadmore__tips{padding: 0 .16em}
.tcui-loadmore_dot .tcui-loadmore__tips:before{content: " "; width: 4px; height: 4px; border-radius: 50%; background-color: #e5e5e5; display: inline-block; position: relative; vertical-align: 0; top: -0.16em}

   .item-buy ul{overflow:hidden;margin:0 -1.5%;padding:0 1em;margin-top:1em}
    .item-buy ul li{width:22%;color:#999;margin:0 1.5%;float:left;text-align:center;background:#f5f5f5;line-height:3em;border-radius:0.2em}
    .item-buy ul li span{display:block}
    .item-buy ul li span:first-child{border-bottom:2px solid #fff}
    .item-buy ul li.on{background:#3cb5f6;color:#fff}
    .buy-text{padding:1em}
    .buy_top_box{}
    .buy_top_box ul {margin:0px;}
    .buy_top_box ul li{width:100%;height: 45px;margin:0px;background:#fff;}
    .buy_top_box ul li .buyitem{
        width: 80%;
        margin-top: 2px;
        padding-top: 2px;
        border: 1px solid #51C332;
        border-radius: 3px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
    }
    .buy_top_box ul li .buyitem .days{
        line-height: 18px;
        color: #51C332;
        font-size: 0.9em;
    }
    .buy_top_box ul li .buyitem .price{
        line-height: 18px;
        font-size: 0.8em;
    }
    .buy_top_box ul li .on .days{color: #fff;}
    .buy_top_box ul li .on .price{color: #fff;}
    .buy_top_box ul li .on{background-color: #51C332;}
    .buy_top_box ul li .on{background-color: #51C332;}
  
  
  .btn-group-blockbsl{ text-align: center;   width: 100%; position: fixed; bottom: 0px;}
.btn-group-blockbsl>a,.btn-group-block>button{display: block;  margin:0px; padding:0px;line-height: 3em; color: #FFF; background: #f5833b;  border: 0; font-size: 1em}
.btn-group-blockbsl button{width: 100%}
.btn-group-block {
    text-align: center;
    width: 100%;
    bottom: 0px;
}
  .btn-group-block button {
    width: 100%;
}
    </style>
    <body>
        <div class="site-header header-fixed">
            <a onclick="window.history.back();" class="back"></a>
            <div class="tit-name">置顶</div>
            <!--<a href="myAttend.html" class="sc">发布</a>-->
        </div>


<section class="mainer">

    <section class="wrap">
        <div class="campaign-main">
            <section class="item">
                <section class="campaign-item clear">
                    <section class="img">
                        <img src="https://www.qmhutui.com/Application/Tpl/App/default/Public/advlist/images/icon47.png" style="height: 40px">
                    </section>
                    <section class="user-fav">
                        <p>1、置顶信息到首页高曝光位置，随机轮换,跟其它置顶信息曝光几率相等;</p>
                        <p>2、购买后送2小时刷新</p>
                    </section>
                </section>
            </section>
            <form name="payForm" id="payForm">
                <input type="hidden" name="id" value="{$id}">
                <input type="hidden" name="type" id="goodid" value="30">
                <section class="item item-buy">
                    <section class="buy_list"> 
                        <div class="tcui-loadmore tcui-loadmore_line">
                            <span class="tcui-loadmore__tips">选择置顶时间</span>
                        </div>
                        <div class="buy_top_box">
                            <ul>

                                <li>
                                    <div id="buy-item-180" class="id-buy-item buyitem tc-template__border on" onclick="chooseBuyItem(180,'900');">
                                        <div class="days ">180天</div>

                                        <div class="price">900元</div>
                                    </div>
                                </li><li>
                                    <div id="buy-item-90" class="id-buy-item buyitem tc-template__border" onclick="chooseBuyItem(90,'500');">
                                        <div class="days ">90天</div>

                                        <div class="price">500元</div>
                                    </div>
                                </li><li>
                                    <div id="buy-item-30" class="id-buy-item buyitem tc-template__border" onclick="chooseBuyItem(30,'200');">
                                        <div class="days ">30天</div>

                                        <div class="price">200元</div>
                                    </div>
                                </li><li>
                                    <div id="buy-item-15" class="id-buy-item buyitem tc-template__border" onclick="chooseBuyItem(15,'110');">
                                        <div class="days ">15天</div>

                                        <div class="price">110元</div>
                                    </div>
                                </li><li>
                                    <div id="buy-item-7" class="id-buy-item buyitem tc-template__border" onclick="chooseBuyItem(7,'60');">
                                        <div class="days ">7天</div>

                                        <div class="price">60元</div>
                                    </div>
                                </li><li>
                                    <div id="buy-item-3" class="id-buy-item buyitem tc-template__border" onclick="chooseBuyItem(3,'30');">
                                        <div class="days ">3天</div>

                                        <div class="price">30元</div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </section>
                    <section class="buy-text">
                        <p>置顶信息显示版块：加粉中心首页<span style="float: right;color: #f00;font-size: 1.1em;" id="totalPrice">￥900</span></p>
                    </section>
                </section>
                <section class="btn-group-block">
                    <button type="button" class="id_top_btn tc-template__bg" style="">确认购买</button>
                    <button type="button" class="id_top_btn2" style="background: rgb(202, 202, 202); display: none;">确认购买</button>
                </section>
            
        </div>
    </section>
</section>
    <script>
    chooseBuyItem(30,'200');
    function chooseBuyItem(days,price){
        $('#totalPrice').html('￥'+price);
        $(".id-buy-item").removeClass("on");
        $("#buy-item-"+days).addClass("on");
        $('#goodid').val(days);
        $(".id_top_btn").show();
        $(".id_top_btn2").hide();
    }

    var submintPayStatus = 0;
    $(".id_top_btn").click( function (){
        if(submintPayStatus == 1){
            return false;
        }
        submintPayStatus = 1;
        $.ajax({
            type: "POST",
            url: "/home/connection/top",
            dataType : "json",
            data: $('#payForm').serialize(),
            success: function(res){
              console.log(res)
              if(res.type == 'success'){
              		alert('置顶成功')
              		history.go(-1)
              }else{
              	alert(res.message)
              }
            }
        });
    });
    </script>
    
    
</body>
</html>